import { ref } from "vue";

interface LableItem {
  label: string;
  value: number;
}

const editLabelList = ref<LableItem[]>([
  {
    label: "螺旋杆个数",
    value: 0
  },
  {
    label: "滤芯个数",
    value: 0
  },
  {
    label: "流量采集间隔(ms)",
    value: 0
  },
  {
    label: "设定值螺旋杆流量(r/ml)",
    value: 0
  },
  {
    label: "滤芯流量寿命阈值(ml)",
    value: 0
  }
]);

const readOnlyLableList = ref<LableItem[]>([
  {
    label: "螺旋杆1转速(r/s)",
    value: 0
  },
  {
    label: "螺旋杆1流量(ml)",
    value: 0
  },
  {
    label: "螺旋杆2转速(r/s)",
    value: 0
  },
  {
    label: "螺旋杆2流量(ml)",
    value: 0
  },
  {
    label: "三通阀涂布信号",
    value: 0
  },
  {
    label: "背辊运转信号",
    value: 0
  },
  {
    label: "涂布时间(秒)",
    value: 0
  },
  {
    label: "过滤器总流量(L)",
    value: 0
  }
]);

const chartOptions = {
  // 标题
  title: {
    text: "涂布过滤器每周流量",
    left: "center",
    top: "20",
    textStyle: {
      fontSize: 18,
      fontWeight: "bold",
      color: "#333"
    }
  },
  // 提示框
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "#000",
        width: 2
      }
    },
    formatter: (params: { name: string; seriesName: string; value: number }[]) => {
      return `${params[0].name} ${params[0].seriesName}: ${params[0].value}`;
    }
  },
  // x 轴
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      color: "#666",
      fontSize: 12
    },
    axisLine: {
      lineStyle: {
        color: "#999"
      }
    },
    boundaryGap: false
  },
  // y 轴
  yAxis: {
    type: "value",
    name: "流量/ml",
    nameTextStyle: {
      color: "#666",
      fontSize: 12
    },
    axisLabel: {
      color: "#666",
      fontSize: 12
    },
    axisLine: {
      lineStyle: {
        color: "#999"
      }
    },
    splitLine: {
      lineStyle: {
        color: "#eee"
      }
    }
  },

  // 图例
  legend: {
    data: ["螺杆1", "螺杆2", "滤芯"],
    right: "20px",
    top: "20px",
    itemWidth: 25,
    itemHeight: 14,
    textStyle: {
      color: "#666",
      fontSize: 12
    }
  },

  // 系列数据
  series: [
    {
      name: "螺杆1",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      // 线条样式
      lineStyle: {
        color: "#2ec7c9",
        width: 2,
        opacity: 0.8
      },
      // 点样式
      itemStyle: {
        color: "#2ec7c9",
        width: 6,
        height: 6,
        border_radius: 3
      },
      // 平滑曲线
      smooth: true,
      // 曲线张力，值越大越平滑
      tension: 0.5
    },
    {
      name: "螺杆2",
      data: [620, 732, 701, 734, 1090, 1130, 1120],
      type: "line",
      lineStyle: {
        color: "#73c0de",
        width: 2,
        opacity: 0.8
      },
      itemStyle: {
        color: "#73c0de",
        width: 6,
        height: 6,
        border_radius: 3
      },
      smooth: true,
      tension: 0.5
    },
    {
      name: "滤芯",
      data: [650, 1231, 1232, 123, 1090, 1130, 1120],
      type: "line",
      lineStyle: {
        color: "#409cee",
        width: 2,
        opacity: 0.8
      },
      itemStyle: {
        color: "#73c0de",
        width: 6,
        height: 6,
        border_radius: 3
      },
      smooth: true,
      tension: 0.5
    }
  ]
};

interface Site {
  name: string;
  id: number;
}

interface ProcessStepName {
  name: string;
  id: number;
}

interface DeviceInfo {
  name: string;
  id: string;
}

const siteList: Site[] = [
  {
    name: "JC基地",
    id: 2001
  }
];

const processStepNameList: ProcessStepName[] = [
  {
    name: "涂布工序",
    id: 2
  }
];

const deviceInfoList: DeviceInfo[] = [
  {
    name: "阴极涂布5号机",
    id: "MIXI005"
  }
];

export {
  editLabelList,
  readOnlyLableList,
  chartOptions,
  siteList,
  processStepNameList,
  deviceInfoList
};
